<template>
	<view class="center p-x-20">
		<view class="">
			<view v-if="orderInfo" class=" p-x-20 p-y-20 radius-20 bs-bx po-r" style="background-color: #fff;">
				<view class="flex-a">
					<uv-icon name="map" size="18"></uv-icon>
					<text class="m-l-10 size-28">城市:</text>
					<text class="m-l-10 size-28 bold"
						style="color: #122f84;"  @click="copy(orderInfo.newOrderContent.cityName)">{{orderInfo.newOrderContent.cityName}}</text>
				</view>
				<view class="flex-a m-t-10">
					<uv-icon name="home" size="18"></uv-icon>
					<text class="m-l-10 size-28">门店:</text>
					<text class="m-l-10 size-28 bold" style="color: #999;" @click="copy(orderInfo.storeName)">{{orderInfo.storeName}}</text>
				</view>
				<view class="flex-a m-t-10">
					<uv-icon name="empty-order" size="18"></uv-icon>
					<text class="m-l-10 size-28">店铺ID:</text>
					<text class="m-l-10 size-28 bold" style="color: #999;" @click="copy(orderInfo.storeCode)">{{orderInfo.storeCode}}</text>
				</view>
				<view class="flex-a m-t-10">
					<uv-icon name="file-text" size="18"></uv-icon>
					<text class="m-l-10 size-28">订单号:</text>
					<text class="m-l-10 size-28 bold" style="color: #999;" @click="copy(orderInfo.id)">{{orderInfo.id}}</text>
				</view>
				<!-- <view class="po-a p-x-40 p-y-10 white bold" style="top: 0%;right: 0%;background-color: #bf2121;border-radius: 0 20rpx 0 20rpx;">
					{{difference==0 ? '待上传' : difference==1 ? '审核中' : '已处理'}}
				</view> -->
				<view class="po-a p-x-20 p-y-10 white bold" style="top: 0%;right: 0%;">
					<uv-button @click="changeJfAdd(groups)" type="primary" text="上传佐证" size="mini">
					</uv-button>
				</view>
			</view>
			<view v-if="orderInfo" class=" p-x-20 p-y-20 radius-20 bs-bx po-r m-t-20" style="background-color: #fff;">
				<!-- 肯德基 -->
				<view class="flex-b" v-if="orderInfo.platform==2">
					<view class="flex">
						<view class="w-100 h-100">
							<image v-if="orderInfo.productImg" class="w-100 h-100" :src="orderInfo.productImg" mode="">
							</image>
						</view>
						<view v-if="orderList && orderInfo" class="m-l-10 flex-column3">
							<view class="size-28 flex">
								<text>{{orderInfo.productName}}</text>
								<text class="m-l-20 bold" style="color: red;">￥{{orderInfo.totalAmount}}</text>
							</view>
							<view style="padding: 10rpx;background-color: #fff;">
								<uv-read-more show-height="40rpx" textIndent="0em" :toggle="true"
									:shadowStyle="shadowStyle" closeText="展开" color="#8e6236">
									<view v-for="item in orderInfo.newOrderContent.packets[0].products"
										style="font-size: 25rpx;color: #000;">
										<view class="" v-for="item1 in kdjGenerateString(item)">
											{{item1}}
										</view>
									</view>
								</uv-read-more>
							</view>
						</view>
					</view>
				</view>


				<view class="flex-b" v-if="orderInfo.platform==3">
					<view class="flex">
						<view class="">
							<image class="w-100 h-100" :src="orderInfo.productImg" mode=""></image>
						</view>
						<view v-if="orderList && orderInfo" class="m-l-10 flex-column3" style="flex-wrap: wrap;">
							<view class="size-28 flex">
								<text>{{orderInfo.productName}}</text>
								<text class="m-l-20 bold" style="color: red;">￥{{orderInfo.totalAmount}}</text>
							</view>
							<!-- <view class="size-25 color-gray m-t-10" style="word-wrap:break-word;word-break:break-all;">{{orderList.packets[0].products[0].strValue}}</view> -->
						</view>
					</view>
					<view class="">
						×1
					</view>
				</view>
				<view class="flex-b" v-else-if="orderInfo.platform==4">
					<view class="flex">
						<view class="">
							<image class="w-100 h-100" :src="orderInfo.productImg" mode=""></image>
						</view>
						<view v-if="orderList && orderInfo" class="m-l-10 flex-column3" style="flex-wrap: wrap;">
							<view class="size-28 flex">
								<text>{{orderInfo.productName}}</text>
								<text class="m-l-20 bold" style="color: red;">￥{{orderInfo.totalAmount}}</text>
							</view>
							<view style="padding: 10rpx;background-color: #fff;">
								<uv-read-more show-height="40rpx" textIndent="0em" :toggle="true"
									:shadowStyle="shadowStyle" closeText="展开" color="#8e6236">
									<view v-for="item in orderInfo.newOrderContent.packets[0].products"
										style="font-size: 25rpx;color: #000;">
										<view class="" v-for="item1 in generateString(item)">
											{{item1}}
										</view>
									</view>
								</uv-read-more>
							</view>
							<view class="size-25 color-gray m-t-10" style="word-wrap:break-word;word-break:break-all;">
								{{orderList.packets[0].products[0].strValue}}
							</view>
						</view>
					</view>
					<view class="">
						×1
					</view>
				</view>
				<view class="flex-b" v-else-if="orderInfo.platform==6">
					<view class="flex">
						<view class="">
							<image class="w-100 h-100" :src="orderInfo.productImg" mode=""></image>
						</view>
						<view v-if="orderList && orderInfo" class="m-l-10 flex-column3">
							<view class="size-28 flex">
								<text>{{orderInfo.productName}}</text>
								<text class="m-l-20 bold" style="color: red;">￥{{orderInfo.totalAmount}}</text>
							</view>
							<view style="padding: 10rpx;background-color: #fff;">
								<uv-read-more show-height="40rpx" textIndent="0em" :toggle="true"
									:shadowStyle="shadowStyle" closeText="展开" color="black">
									<view v-for="item in orderInfo.newOrderContent.packets[0].products"
										style="font-size: 25rpx;color: #000;">
										<view v-if="item.option_list">
											<view v-for="item1 in dksGenerateString(item)">
												{{item1}}
											</view>
										</view>
										<view v-else>
											<view v-for="item4 in item2.coupon_list[0].condiment_list">
												{{item4.name}}
											</view>
										</view>
									</view>
								</uv-read-more>
							</view>
						</view>
					</view>
					<view class="">
						×1
					</view>
				</view>
				<view class="text-r" v-if="orderInfo">
					<text class="bold size-28">到手价：</text> <text class="bold size-20">￥</text><text class="bold"
						style="color: red;">{{orderInfo.realTotalAmount}}</text>
				</view>
			</view>
			<view class=" p-x-20 p-y-20 radius-20 bs-bx po-r m-t-20" style="background-color: #fff;" @click="toNegotiationHistory(orderInfo.id)">
				协商历史
			</view>
		</view>

		<!-- 弹窗 -->
		<uv-popup ref="popup1">
			<view>
				<view style="padding: 16rpx;display: flex;background-color: #3c9cff;justify-content: space-between;">
					<view style=" color: #fff; font-size: 32rpx;">上传佐证</view>
					<view @click="cancel">
						<uv-icon name="close" color="#fff" customStyle="padding-top:6rpx"></uv-icon>
					</view>
				</view>
				<view style="padding: 20rpx 80rpx;display: flex;margin-top: 10rpx;">
					<view style="margin-right: 20rpx;margin-top: 10rpx;">
						纠纷原因:
					</view>
					<uv-input v-model="disputeText" type="textarea" placeholder="请详细描述您的证据" />
				</view>
				<view style="padding: 20rpx 80rpx;display: flex;">
					<view style="margin-right: 20rpx;margin-top: 10rpx;">
						纠纷图片:
					</view>

					<uv-upload :fileList="disputeImage" name="1" multiple :maxCount="5" @afterRead="afterRead"
						@delete="deletePic" :previewFullImage="true" :deletable="true" :beforeUpload="beforeUpload">
					</uv-upload>
					<view v-if="uploading" style="margin-top: 20rpx;">
						<view v-for="(item, index) in uploadProgress" :key="index" style="margin-bottom: 10rpx;">
							<view style="display: flex; justify-content: space-between; font-size: 24rpx; color: #666;">
								<text>图片 {{ index + 1 }}</text>
								<text>{{ item.progress }}%</text>
							</view>
							<uv-line-progress :percentage="item.progress"
								:activeColor="item.status === 'error' ? '#f56c6c' : '#67c23a'" :height="8">
							</uv-line-progress>
						</view>
					</view>
				</view>
				<view style="display: flex; justify-content: right; gap: 20rpx; padding: 0rpx 20rpx 20rpx 20rpx;">
					<uv-button type="info" :plain="true" :hairline="true" text="取消" @click="cancel"></uv-button>
					<uv-button type="primary" @click="submitDispute" text="提交"></uv-button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		toRefs,
		onMounted,
		nextTick,
	} from "vue";
	import {
		onLoad,
		onReachBottom,
		onShow,
		onLaunch,
		onReady,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		generateString,
		dksGenerateString,
		kdjGenerateString
	} from '@/utils/shopStr.js'
	import {
		grabInfo
	} from '@/api/index.js'
	import {
		unloadDispute,
		lookDispute
	} from '@/api/grab/grab.js'
	import {
		dataGong,
		sortJsonKeys,
		sortAndFormatParams,
		combine
	} from '@/utils/encryption.js'
	let orderId = ref()
	let difference = ref()

	let orderInfo = ref()
	let orderList = ref()

	let disputeText = ref()
	let disputeImage = ref([])
	let disputePhone = ref()
	let shadowStyle = ref({
		boxShadow: 'none'
	})
	let differenceList = ref()
	const popup1 = ref(false)
	let merchantId = ref()

	onLoad((value) => {
		if (value.id) {
			// difference.value = value.difference
			merchantId.value = value.merchantId
			orderId.value = value.id
			getGrabInfo()
		}
		// if(value.difference==1){
		// 	difference.value = value.difference
		// 	getLookDispute()
		// }
	})
	const getGrabInfo = () => {
		let cityJinWei = {
			id: orderId.value,
			merchantId:merchantId.value,
			status: 2,
			...dataGong()
		}
		let cenShi = sortAndFormatParams(cityJinWei) //请求序列化并变成字符串
		let combineTrue = combine(cenShi, cityJinWei.timestamp)
		grabInfo(cityJinWei, combineTrue).then(res => {
			if (res.data.newOrderContent) {
				orderInfo.value = res.data
				orderList.value = orderInfo.value.newOrderContent
			}
		})
	}
// 上传图片后处理
	const afterRead = async (event) => {
		console.log(event);
		let lists = [].concat(event.file)
		let fileListLen = disputeImage.value.length
		console.log(lists);
		lists.map((item) => {
			disputeImage.value.push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})
		for (let i = 0; i < lists.length; i++) {
			let result = await addImage(lists[i].url)
			console.log(result);
			let item = disputeImage.value[fileListLen]
			disputeImage.value.splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				url: result
			}))
			fileListLen++
			console.log('fileListLen', fileListLen);
			console.log(disputeImage.value);
		}
	}

	const addImage = (url) => {
		return new Promise((resolve, reject) => {
			let token = uni.getStorageSync('token')
			const tempFilePaths = url;
			uni.uploadFile({
				url: '/transminApi/orderApi/evidence/disputeImages',
				filePath: tempFilePaths,
				name: 'disputeFiles',
				header: {
					'X-Requested-With': 'XMLHttpRequest',
					"Accept": "application/json",
					Authorization: token
				},
				success: (res) => {
					let data = JSON.parse(res.data)
					if (data.code != 0) {
						uni.showToast({
							title: data.message,
							icon: "none",
							duration: 2000
						})
					} else {
						uni.showToast({
							title: '上传成功',
							icon: "none",
						})
						resolve(data.data[0])
					}

				}
			});
		})
	}

	const deletePic = (event) => {
		disputeImage.value.splice(event.index, 1)
	}
// 提交纠纷佐证
	const submitDispute = () => {
		if (!disputeText.value || disputeText.value == '') {
			uni.showToast({
				title: '请填写文字说明',
				icon: "none",
			})
			return
		}
		// if(disputeImage.value.length<=0){
		// 	uni.showToast({
		// 	title: '请上传图片',
		// 	icon: "none",
		// 	})
		// 	return
		// }
		disputeImage.value.forEach(item => {
			console.log(item);
			delete item.message
			delete item.status
			delete item.name
			delete item.size
			delete item.thumb
			delete item.type
		})

		let cityJinWei = {
			orderId: orderId.value,
			description: disputeText.value,
			imagesJson: disputeImage.value,
			phone: disputePhone.value,
			...dataGong()
		}
		let cenShi = JSON.stringify(sortJsonKeys(cityJinWei)) //请求序列化并变成字符串
		let combineTrue = combine(cenShi, cityJinWei.timestamp)

		unloadDispute(cityJinWei, combineTrue).then(res => {
			console.log(res);
			uni.showToast({
				title: res.message,
				icon: "none",
				duration: 2000
			})
			setTimeout(() => {
				uni.reLaunch({
					url: `/pages/order/order?currentStatus=${5}`
				})
			}, 1000)
		}).catch(err => {
			uni.showToast({
				title: '上传失败',
				icon: "none",
			})
		})
	}
	
	
	// 查看凭证
	const getLookDispute = () => {
		let cityJinWei = {
			id: orderId.value,
			...dataGong()
		}
		let cenShi = sortAndFormatParams(cityJinWei) //请求序列化并变成字符串
		let combineTrue = combine(cenShi, cityJinWei.timestamp)
		lookDispute(cityJinWei, combineTrue).then(res => {
			console.log('res--------------', res);
			differenceList.value = res.data
		})
	}
	// 上传佐证
	const changeJfAdd = (groups) => {
		// currentDisputeItem.value = groups
		// disputeReason.value = ''
		popup1.value.open('center');
	}
	
	//协商历史
	const toNegotiationHistory = (id) => {
		// 将数组转为 JSON 字符串，并编码
		  // const encodedData = encodeURIComponent(JSON.stringify(disputeDetails));
		uni.navigateTo({
			url: `/pagesA/grab/negotiationHistory?id=${id}`
		})
	}
	
	const cancel = () => {
		popup1.value.close();
	}
	
	const copy = (value)=>{
		uni.setClipboardData({
			data: value,
			success: function () {
				uni.showToast({
					title: '复制成功',
					icon: "none",
				})
			}
		});
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 150rpx;
	}

	::v-deep .uv-upload__button {
		margin: none;
	}
</style>
